<template>
  <div class="info-box">
    <div v-for="item in pageData.info" :key="item.name" class="item-box">
      <div class="info-name">
        {{ item.name }}
      </div>
      <div class="info-data">
        <p class="count">{{ item.value }}</p>
        <p class="unit">{{ item.unit }}</p>
      </div>
    </div>
  </div>
  <div class="charts">
    <p class="title">2022-2023启事统计</p>
    <div id="category" style="width: 1200px;height:400px;border: 1px solid #ccc;"></div>
  </div>
</template>

<script setup lang="ts">
import { getAllUser } from '@/api/system/user';
import { getThingInfo } from '@/api/thing/thingInfo';
import { getThingType } from '@/api/thing/thingType';
import { getLocationByKey, getThingCount, getUnCheck } from '@/utils/lib/count';
import { onMounted, reactive, watch } from 'vue';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { deepClone } from '@/utils/lib/clone';

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | GridComponentOption | BarSeriesOption
>;

/**
 * 创建柱状图
 */
const initCategory = async (data: any) => {
  try {
    const categoryDom = document.getElementById('category')!;
    const categoryChart = echarts.init(categoryDom);
    categoryChart.showLoading();
    const option: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          },

        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [],
          colorBy: 'data'
        }
      ]
    };

    option && categoryChart.setOption(option);
    //  console.log('arr',getThingCount(data, 'TIME'));
    categoryChart.setOption({
      series: [
        {
          data: getThingCount(data, 'TIME')
        }
      ]
    });

    categoryChart.hideLoading();
  } catch (error) {
    return Promise.reject(error)
  }
}





const pageData = reactive({
  info: [
    {
      name: '用户人数',
      value: 0,
      unit: '人'
    },
    {
      name: '启事类别',
      value: 0,
      unit: '种'
    },
    {
      name: '未审核启事',
      value: 0,
      unit: '件'
    },
    {
      name: '经常失物地点',
      value: '无',
      unit: ''
    }
  ],
  thingData: [] as any
})

/**
 * 数据初始化
 */
const init = async () => {
  try {
    await getThing()
    await getUserCount()
    await getTypeCount()

  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 获取注册用户总量
 */
const getUserCount = async () => {
  try {
    const res = await getAllUser()
    if (res.data.code === 200) {
      pageData.info[0].value = res.data.data.length
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 获取启事类别总量
 */
const getTypeCount = async () => {
  try {
    const res = await getThingType({
      pageNo: 1,
      pageSize: 5
    })
    if (res.data.code === 200) {
      pageData.info[1].value = res.data.data.result.length
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 获取启事信息
 */
const getThing = async () => {
  try {
    const res = await getThingInfo({
      pageNo: 1,
      pageSize: 5,
      key: '',
      status: '',
      tag: '',
      TIME: undefined
    })
    if (res.data.code === 200) {
      pageData.thingData = deepClone(res.data.data.result)
      pageData.info[3].value = getLocationByKey(res.data.data.result, 'location');
      pageData.info[2].value = getUnCheck(res.data.data.result, 'audit_status');
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

init()
watch(() => pageData.thingData, (val) => {
  if (val.length > 0) {
    console.log('val', val);

    initCategory(val)
  }
})

</script>

<style scoped lang="less">
@import '@/styles/mixin.less';

.info-box {
  .flex(row, space-between, center);
  padding: 10px 20px;
  // border: 2px solid #ccc;

  .item-box {
    .flex(column, center, center);
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 100px;

    .info-name {
      font-size: 16px;
      // width: 200px;

    }

    .info-data {
      .flex(row, center, baseline);


      .count {
        font-size: 26px;

        // width: 200px;
        font-weight: bold;
      }

      .unit {
        font-size: 14px;
        margin-left: 2px;
      }
    }
  }

}

.charts {
  .flex(column, center, center);

  .title {
    color: rgb(116, 142, 222);
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
  }
}
</style>